<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>页面标题</title>
    <style>
    /* header */
    .header{ height:50px; }
    .header div { float:left; width:100px; }
    
    /* top-menu-nav */
    .top-menu-nav { float:right; }
    .top-menu-nav ul { float:left; }
    .top-menu-nav ul li { float:left; }
    .top-menu-nav ul li a { float:left; padding:0 15px; height:50px; }
    </style>
    <script>
    
    //jQuery案例，使用jQuery对象写方法，不使用 $
    jQuery(".xxx").show();
    
    //jQuery案例，使用局部 $
    (function($){
        
        $(".xxx").show();
    })(jQuery);
    
    //jQuery还可以移交控制权，将对象名改为自己想要的变量名
    </script>
</head>
<body>
    <!-- header s1art -->
    <div class="header">
        <div>
            <a href="#"><img src="" alt="无图片显示文本" /></a>    
        </div>
        
        <!-- top-menu-nav start -->
        <div class="top-menu-nav">
            <ul>
                <li><a href="">菜单一</a></li>
                <li><a href="">菜单二</a></li>
                <li><a href="">菜单三</a></li>
            </ul>
        </div>
        <!-- top-menu-nav end -->
        
    </div>
    <!-- header end -->
</body>
</html>